<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理页</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>
<br/>
姓名：<input type="text" name="name">
    <button class="btn btn-info search">搜索</button>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">新增</button>
    <button class="btn btn-danger delAll ">批量删除</button>
    <br/><br/><br/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增用户</h4>
            </div>
            <div class="modal-body">
                <label for="Name">昵称</label>
                <input type="email" class="form-control" id="Name" name="name1" placeholder="Email">
                <label for="TureName">姓名</label>
                <input type="email" class="form-control" id="TureName" name="trueName" placeholder="Email">
                <label for="Telephone">电话号码</label>
                <input type="email" class="form-control" id="Telephone" name="telephone" placeholder="Email">
                <label for="CardId">身份证</label>
                <input type="email" class="form-control" id="CardId" name="cardId" placeholder="Email">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">修改用户</h4>
            </div>
            <div class="modal-body">
                <label for="Name">昵称</label>
                <input type="email" class="form-control" id="Name1" name="Name" placeholder="Email">
                <label for="TureName">姓名</label>
                <input type="email" class="form-control" id="TureName1" name="TrueName" placeholder="Email">
                <label for="Telephone">电话号码</label>
                <input type="email" class="form-control" id="Telephone1" name="Telephone" placeholder="Email">
                <label for="CardId">身份证</label>
                <input type="email" class="form-control" id="CardId1" name="CardId" placeholder="Email">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email1" name="Email" placeholder="Email">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<table class="table">
    <thead>
    <tr>
        <th><input type="checkbox" id="parent"></th>
        <th>昵称</th>
        <th>姓名</th>
        <th>telephone</th>
        <th>身份证</th>
        <th>邮箱</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function () {
        function get_user(name) {
            //获取数据
            $.ajax({
                type:"get",
                data:{"name":name},
                url:"http://localhost:9527/CrudDemo_Web_exploded/SelectUser",
                async:true,//若为true就是异步请求，false，同步请求
                beforeSend:function () {
                    //ajax执行前的回调函数
                },
                success:function (res) {
                    //ajax执行成功的回调函数
                    if(res.code==0){
                        var list = res.data;
                        //遍历数组
                        $("tbody").empty();
                        $.each(list,function (index,obj) {
                        var tr=$(`<tr>
                            <td><input type="checkbox" data-id="${obj.id}" class="removeUser children" ></td>
                                <td>${obj.name}</td>
                                <td>${obj.trueName}</td>
                                <td>${obj.telephone}</td>
                                <td>${obj.cardId}</td>
                                <td>${obj.email}</td>
                                <td>
                                <button class="btn btn-info updateinfo" data-toggle="modal" data-target="#myModal1" data-id="${obj.id}">修改</button>
                                <button class="btn btn-danger delBtn" data-id="${obj.id}">删除</button>
                                </td>
                                </tr>`)
                                tr.appendTo("tbody");
                        })
                    }
                },
                fail:function (res) {
                    //ajax执行失败的回调函数
                    alert("网络异常")
                }
            });
        }
        get_user(null);
        $(".search").click(function () {
            var name=$("input[name='name']").val();
            get_user(name);
        })
        //删除该条记录
        $(document).on("click",".delBtn",function () {
            var ids =$(this).data("id");
            var flag = confirm("请确定要删除该记录吗？");
            if(flag){
                deleteUser(ids);
            }
        });
        //删除多条记录
        $(".delAll").click(function () {
            //选中了多少条
            //取出元素中id值拼接ids
            var count=0;
            var ids="";
            $(".children").each(function (index,obj) {
                if($(this).is(":checked")){
                    count++;
                    ids+=$(this).data("id")+",";
                }
            });
            if(confirm(`您确定要删除${count}条记录`)){
                ids = ids.substring(0,ids.length-1);
                deleteUser(ids);
            }
        })
        //删除用户
        function deleteUser(ids){
            $.ajax({
                type: "post",
                data: {"ids": ids},
                url: "http://localhost:9527/CrudDemo_Web_exploded/batchDelUser",
                success: function (res) {
                    if (res.code == 0) {
                        alert(res.massage);
                        $("#parent").prop("checked",false);
                        location.reload();
                    }else {
                        alert(res.massage);
                    }
                }
            })
        }
        //实现全选，反选效果
        $("#parent").click(function () {
            if($(this).is(":checked")){
                $(".children").prop("checked",true);
            }else {
                $(".children").prop("checked",false);
            }
        })
        $("#addBtn").click(function () {
            var name=$("[name='name1']").val();
            var trueName=$("[name='trueName']").val();
            var cardId=$("[name='cardId']").val();
            var email=$("[name='email']").val();
            var telephone=$("[name='telephone']").val();
            $.ajax({
                type:"post",
                url:"http://localhost:9527/CrudDemo_Web_exploded/AddUser",
                data:{"name":name,"trueName":trueName,"cardId":cardId,"email":email,"telephone":telephone},
                success:function (res) {
                    if(res.code==0){
                        alert(res.massage);
                        location.reload();
                    }else {
                        alert(res.massage);
                    }
                }
            })
        })
        $(document).on("click",".updateinfo",function () {
            var id = $(this).attr("data-id");
            sessionStorage.setItem("id",id);
        })
        $("#updateBtn").click(function () {
            var id = sessionStorage.getItem("id");
            var name=$("[name='Name']").val();
            var trueName=$("[name='TrueName']").val();
            var cardId=$("[name='CardId']").val();
            var email=$("[name='Email']").val();
            var telephone=$("[name='Telephone']").val();
            var  flag = confirm("您确定要修改该记录吗？");
            if (flag) {
                $.ajax({
                    type: "post",
                    url: "http://localhost:9527/CrudDemo_Web_exploded/UpdateUser",
                    data: {
                        "id":id,
                        "name": name,
                        "trueName": trueName,
                        "cardId": cardId,
                        "email": email,
                        "telephone": telephone
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            alert(res.massage);
                            location.reload();
                        } else {
                            alert(res.massage);
                        }
                    }
                })
            }
        })
    })
</script>
</body>
</html>